﻿
@{
    Layout = "~/Views/Shared/_Index.cshtml";
}
<link href="~/ui/plugins/select2/select2.min.css" rel="stylesheet"/>
<link href="~/ui/plugins/select2/select2-bootstrap.css" rel="stylesheet" />
<div class="container-div">
    <div class="ibox">
        <div class="ibox-content">
            <div class="nav-tabs-custom">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a data-toggle="tab" href="#tab-1" aria-expanded="true">菜单</a>
                    </li>
                    <li class="">
                        <a data-toggle="tab" href="#tab-2" aria-expanded="false">操作</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div id="tab-1" class="tab-pane active">
                        <div class="panel-body">
                            <form class="form form-horizontal" id="menuForm" autocomplete="off">
                                <input type="hidden" name="id" id="id" value="@(ViewBag.Id)">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">父菜单：</label>
                                    <div class="col-sm-5">
                                        @Html.DropDownList("parent_id", ViewBag.MenuSel as SelectList, new {@class="form-control m-b"})
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label is-required">菜单名称：</label>
                                    <div class="col-sm-5">
                                        <input type="text" name="menu_name" id="menu_name" class="form-control" data-rule="required">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label is-required">请求地址：</label>
                                    <div class="col-sm-5">
                                        <input type="text" name="menu_url" id="menu_url" class="form-control" value="#" data-rule="required">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label is-required">权限标识：</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" name="role_tag" id="role_tag"  value="#" data-rule="required">
                                        <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 控制器中定义的权限标识，如：[RequirePermission("system:sysmenu:view")]</span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label is-required">图标：</label>
                                    <div class="col-sm-5">
                                        <div class="input-group">
                                            <input type="text" name="menu_icon" id="menu_icon" class="form-control" value="fa fa-bookmark" data-rule="required">
                                            <span class="input-group-addon"><i id="pickIcon" class="fa fa-bookmark"></i></span>
                                            <span class="input-group-btn">
                                                <button type="button" class="btn btn-primary" onclick="showicon();">
                                                    搜索图标
                                                </button>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label is-required">排序：</label>
                                    <div class="col-sm-5">
                                        <input type="number" name="menu_sort" id="menu_sort" value="1" class="form-control" data-rule="required">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">备注：</label>
                                    <div class="col-sm-9">
                                        <textarea name="remark" id="remark" cols="60" rows="4"></textarea>
                                    </div>
                                </div>
                                <input type="hidden" name="funcs" id="funcs" class="form-control">
                            </form>
                        </div>
                    </div>
                    <div id="tab-2" class="tab-pane">
                        <div class="panel-body">
                            <form class="form form-horizontal" id="funcForm" autocomplete="off">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>名称</th>
                                            <th>权限标识</th>
                                            <th>排序</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="optbody">
                                        <tr>
                                            <td> <input type="text" placeholder="名称" class="form-control" value="新增" data-rule="required"></td>
                                            <td> <input type="text" placeholder="权限标识" class="form-control" value="admin:sysmenu:add" data-rule="required"></td>
                                            <td width="100"> <input type="number" placeholder="排序" class="form-control" value="1" data-rule="required" min="1"></td>
                                            <td><button class="btn btn-danger " onclick="delrow(this)"><i class="fa fa-trash"></i></button></td>
                                            <td style="display:none;"><input type="hidden" value="0"></td>
                                        </tr>
                                    </tbody>
                                    <tfoot>
                                        <TR>
                                            <TD colspan="8">
                                                <button class="btn btn-info " onclick="addrow(this)"><i class="fa fa-plus"></i></button>
                                            </TD>
                                        </TR>

                                    </tfoot>
                                </table>
                            </form>
                        </div>
                    </div>


                </div>
                <div class="footerbar">
                    <div class="col-sm-12 col-sm-offset-3">
                        <button class="btn btn-primary" type="button" onclick="save()">
                            <i class="fa fa-check"></i>
                            保存
                        </button>
                        <button class="btn btn-danger" type="button" onclick="cancel()">
                            <i class="fa fa-reply-all"></i>关闭
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section scripts
    {
<script type="text/javascript" src="~/ui/plugins/select2/select2.min.js"></script>
    <script type="text/javascript">
        var rowIndex = 3, menuform = false, funcstatus = false;
        $(function () {
            $("#parent_id").select2();
            // $('#parentId').on('select2:select', function (e) {
            //     // 处理自己的业务
            //     console.log(e);
            //     console($(e).select2('val'));
            // });
            $('#menuForm').validator({
                stopOnError: false,
                timely: 2,
                theme: "yellow_right",
                valid: function (form) {
                    menuform = true;
                },
                invalid: function (form) {
                    menuform = false;
                }
            });
            $('#funcForm').validator({
                stopOnError: false,
                timely: 2,
                theme: "yellow_right",
                valid: function (form) {
                    funcstatus = true;
                },
                invalid: function (form, errors) {
                    funcstatus = false;
                    // console.log(errors);
                }
            });
            jutils.handleMessage(function (res) {
                //console.log(res);
                if (res.title == 'font_pick') {
                    $('#menu_icon').val(res.data);
                    $('#pickIcon').attr('class', res.data);
                }

            });

            loadData();

        });


        function loadData() {
            const id = $("#id").val();
            if (jutils.emptyId(id)) {
                return;
            }
            jutils.ajaxGet('/admin/sysmenu/GetModel', { id: id },
                function (res) {
                    const model = res.data.model;
                    $('#menuForm').initFormData(model);
                    $('#pickIcon').attr('class', model.menu_icon);
                    $("#parent_id").select2("val", [model.parent_id]);
                    const funcs = res.data.funcs;
                    const flen = funcs.length;
                    rowIndex = 0;
                    let html = '';
                    if (flen > 0) {
                        for (let i = 0; i < flen; i++) {
                            let model = funcs[i];
                            rowIndex++;
                            html += '<tr>';
                            html += '<td> <input type="text" placeholder="名称" class="form-control" value="' + model.title + '" data-rule="required"></td>';
                            html += '<td> <input type="text" placeholder="权限标识" class="form-control" value="' + model.roleTag + '" data-rule="required"></td>';
                            html += '<td width="100"> <input type="number" placeholder="排序" class="form-control" value="' + model.funcSort + '" data-rule="required" min="1"></td>';
                            html +=
                                '<td><button class="btn btn-danger " onclick="delrow(this)"><i class="fa fa-trash"></i></button></td>';
                            html += '<td style="display:none;"><input type="hidden" value="' + model.id + '"></td>';
                            html += ' </tr>';
                        }
                    }
                    $('#optbody').html(html);
                });
        }

        function save() {

            $('#menuForm').trigger("validate");
            if (!menuform) {
                jutils.error('菜单内容验证失败');
                return;
            }
            var funcArry = [];
            var hasops = $('#optbody').find("tr").length;
            if (hasops > 0) {
                $('#funcForm').trigger("validate");
                if (!funcstatus) {
                    jutils.error('操作内容验证失败');
                    return;
                }

                $('#optbody').find("tr").each(function () {
                    var func = {
                        id: 0,
                        title: '',
                        roleTag: '',
                        funcSort: 1
                    };

                    // var d = $(this).find('input');
                    //console.log($(this).find('input'));
                    $(this).find('input').each(function (index, element) {
                        var itext = $(this).val();
                        if (index === 0) {
                            func.title = itext;
                        } else if (index === 1) {
                            func.roleTag = itext;
                        } else if (index === 2) {
                            func.funcSort = itext;
                        } else if (index === 3) {
                            func.id = itext;
                        }
                    });

                    funcArry.push(func);
                });


            }

            // console.log(funcArry);
            //return;
            if (funcArry.length > 0) {
                const fjson = JSON.stringify(funcArry);
                $('#funcs').val(fjson);
            }

            jutils.ajaxPost('/admin/sysmenu/SaveData',
                $('#menuForm').serialize(),
                function (res) {
                    cancel();
                });
            // console.log(funcArry);
        }

        function delrow(obj) {
            var id = $(obj).parent().next('td').find('input').val();
            if (id !== '0') {
                jutils.confirm('删除当前操作，可能会影响系统权限，确认删除吗？',
                    function () {
                        jutils.ajaxGet('/admin/sysmenu/delfunc',
                            { id: id },
                            function (res) {
                                var $tr = $(obj).parent().parent('tr');
                                $tr.remove();
                                rowIndex--;
                            });
                    });

            } else {
                var $tr = $(obj).parent().parent('tr');
                $tr.remove();
                rowIndex--;
            }

        }

        function addrow() {
            rowIndex++;
            var html = '<tr>';

            html += '<td> <input type="text" placeholder="名称" class="form-control" value="" data-rule="required"></td>';
            html +=
                '<td> <input type="text" placeholder="权限标识" class="form-control" value="system:roletag:new" data-rule="required"></td>';
            html += '<td width="100"> <input type="number" placeholder="排序" class="form-control" value="0" data-rule="required" min="1"></td>';
            html +=
                '<td><button class="btn btn-danger " onclick="delrow(this)"><i class="fa fa-trash"></i></button></td>';
            html += '<td style="display:none;"><input type="hidden" value="0"></td>';
            html += ' </tr>';
            $('#optbody').append(html);

        }

        function cancel() {

            // jutils.closeDialog();
            jutils.postMessage('admin_sysmenu_form', "message from menu form hehe");
            jutils.closeTab('admin_sysmenu_form');
        }

        function showicon(rowIndex) {

            jutils.dialogTop('设置图标', '/ui/icon.html');

        }
    </script>

}
